<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        积分管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>伙伴拉新
      </p>
      <div class="content">
        <div class="box">
          <div class="title">基本信息</div>
          <div style="height: 20px"></div>
          <el-form :model="form" label-width="100px">
            <el-form-item label="规则名称">
              <el-input
                :disabled="disabledBool"
                placeholder="请输入机构名称"
                v-model="form.activeName"
              ></el-input>
            </el-form-item>
            <el-form-item label="规则时间">
              <div style="display: flex">
                <el-date-picker
                  type="date"
                  :disabled="disabledBool"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期"
                  v-model="form.startDate"
                  style="width: 100%"
                ></el-date-picker>
                <div class="times">&nbsp;&nbsp;-&nbsp;&nbsp;</div>
                <el-date-picker
                  type="date"
                  :disabled="disabledBool"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期"
                  v-model="form.endDate"
                  style="width: 100%"
                ></el-date-picker>
              </div>
            </el-form-item>
            <div style="clear: both"></div>
          </el-form>
          <div class="title">规则信息</div>

          <div class="container">
            <div class="describe">注：只统计注册APP成功的代理人数。</div>
            <div class="lister">
              <div class="listerTitle">规则配置</div>
              <div class="lsitCont">
                每拓展&nbsp;&nbsp;<el-input
                  :disabled="disabledBool"
                  @input="
                    (value) => {
                      form.activeCount = value.replace(/[^\d]+/g, '');
                    }
                  "
                  v-model="form.activeCount"
                  class="input"
                  placeholder="请输入内容"
                ></el-input
                >&nbsp;&nbsp;代理，派发&nbsp;&nbsp;<el-input
                  :disabled="disabledBool"
                  @input="
                    (value) => {
                      form.scoCount = value.replace(/[^\d]+/g, '');
                    }
                  "
                  v-model="form.scoCount"
                  class="input"
                  placeholder="请输入内容"
                ></el-input
                >&nbsp;&nbsp;积分
              </div>
            </div>

            <div class="lister" style="align-items: start">
              <div class="listerTitle">规则描述</div>
              <div class="lsitCont">
                <el-input
                  :disabled="disabledBool"
                  type="textarea"
                  style="width: 370px"
                  :rows="4"
                  placeholder=""
                  v-model="form.activeDesc"
                >
                </el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="btnGroup">
          <el-button type="primary" :disabled="submitBool" @click="submit">确定</el-button>
          <el-button @click="back">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { CompareDate } from "../../assets/js/commion"
export default {
  data() {
    return {
      form: {
        activeName: "", //规则名称
        startDate: "", //开始时间
        endDate: "", //结束时间
        activeCount: "", //代理
        scoCount: "", //积分
        activeType: "8", //代表拉新
        disabledBool: false,
        activeDesc: "", //规则描述
        submitBool:false
      },
    };
  },
  created() {
    if (this.$route.query.type) {
      this.getBackData();
      if (this.$route.query.type == "0002") {
        this.disabledBool = true;
        this.submitBool = true
      }
    }
  },
  methods: {
    // 返回
    back() {
      this.$router.push({
        name: "obtain",
      });
    },
    getBackData() {
      let uid = this.$route.query.uid;
      axios
        .post("scoActive/getOneActiveInfo", { uid })
        .then((res) => {
          console.log("获取的回显的数据");
          console.log(res);
          this.form = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    submit() {
      if (
        this.form.activeName != "" &&
        this.form.startDate != "" &&
        this.form.endDate != "" &&
        this.form.activeCount != "" &&
        this.form.scoCount != "" &&
        this.form.activeDesc != ""&&
        CompareDate(this.form.startDate,this.form.endDate)&&
        this.form.activeCount>0&&
        this.form.scoCount>0
      ) {
        let url;
        // 地址栏有type说明是修改
        if (this.$route.query.type) {
          url = "scoActive/modifyActiveInfo";
        } else {
          url = "scoActive/addActive";
        }
        axios
          .post(url, this.form)
          .then((res) => {
            console.log("结果");
            if (res.data.code == "0000") {
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 1, //1秒后自动关闭
              });
              this.$router.push({
                name: "obtain",
              });
            } else {
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 1, //1秒后自动关闭
              });
            }
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        layer.open({
          content: "填写数据有误",
          skin: "msg",
          time: 1, //1秒后自动关闭
        });
      }
    },
  },
};
</script>

<style scoped>
.title {
  height: 40px;
  background: #f9fafc;
  line-height: 40px;
  font-size: 18px;
  color: #303133;
  text-indent: 8px;
  font-family: "MicrosoftYaHei";
  color: #303133;
}
.box {
  padding: 0 20px;
  padding-top: 20px;
}
.lister {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.container {
  margin-top: 10px;
  background: #f9fafc;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  box-sizing: content-box;
}
.btnGroup {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.listerTitle {
  width: 80px;
}
/deep/ .input {
  width: 100px;
}
/deep/ .input .el-input__inner {
  width: 100%;
}
.describe {
  color: #fb932b;
  font-size: 12px;
  margin-bottom: 10px;
}
</style>